<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="titleBox">
      <!-- icon-dingdan -->
      <div class="iconfontcolor icon-dingdan"></div>
      <div class="infoBox">
        <div class="info_line1">
          <h3 class="tit">收款单{{ result.steelNumber }}</h3>
          <div class="tag" style="background-color: #fffce8; color: #f8b030" v-if="result.steelState == 0">
            待结算
          </div>
          <div class="tag" v-else>已结算</div>
        </div>
        <div class="info_line2">
          <div style="margin-right: 15px">
            创建时间：{{ result.createTime }}
          </div>
        </div>
      </div>
      <button class="notAdopt_btn" @click="goBack('/orderManagement/SettlementDoc','third')">返回</button>
      <button class="examineBtn" @click="isShowDialog()" v-if="result.steelState == 0">结算</button>
      <div class="feeGroup" v-else>
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">货主金额</div>
            <div class="price">{{ result.contractorAmount }}</div>
          </div>
        </div>
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">结算金额</div>
            <div class="price" style="color: #1890ff">
              {{ result.payAmount }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="main_item">
        <titleVue :title="'基本信息'"></titleVue>
        <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#939393',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
          <el-descriptions-item label="项目名称">{{
            result.projectName
          }}</el-descriptions-item>
          <el-descriptions-item label="业务类型">{{
            result.steelTypeStr
          }}</el-descriptions-item>
          <el-descriptions-item label="计价方式">{{
            result.priceModeStr
          }}</el-descriptions-item>
          <el-descriptions-item label="计量单位">{{
            result.priceUnitStr
          }}</el-descriptions-item>
          <el-descriptions-item label="货主名称">{{
            result.cargoName
          }}</el-descriptions-item>
          <el-descriptions-item label="运量">{{
            result.transportTotal
          }}</el-descriptions-item>
          <el-descriptions-item label="负责人">{{
            result.headName
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            result.headTel
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main_item" v-if="result.steelState == 1">
        <titleVue :title="'结算费用'"></titleVue>
        <el-descriptions border class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#262626',
          width: '120px',
          fontSize: '12px',
          fontWeight: 'bold',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
          <el-descriptions-item label="货主金额">{{
            result.contractorAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="结算金额">{{
            result.payAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="附件">
            <el-button type="text" size="small" @click.native="goUrl(result.fileUrls)">点击查看附件</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main_item">
        <titleVue :title="'订单信息'"></titleVue>
        <div class="list">
          <el-table :data="result.orderInfoList" style="width: 100%" :header-cell-style="{
            height: '40px',
            backgroundColor: '#F5F5F5',
            color: '#262626',
            fontSize: '12px',
            padding: '0',
            fontweight: 'bold',
          }">
            <el-table-column align="center" label="序号" width="70">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="transportStatus" label="订单状态" width="100">
              <template slot-scope="scope">
                <div class="tagBox">
                  <div class="tag green" v-if="scope.row.transportStatus == 9">
                    <div class="dian"></div>
                    <div class="text">已完成</div>
                  </div>
                  <div class="tag yellow" v-else-if="scope.row.transportStatus == 1">
                    <div class="dian"></div>
                    <div class="text">待派车</div>
                  </div>
                  <div class="tag dispatched" v-else>
                    <div class="dian"></div>
                    <div class="text">已派车</div>
                  </div>
                </div>

              </template>
            </el-table-column>
            <el-table-column align="center" prop="orderNo" label="订单编号" width="220">
            </el-table-column>
            <el-table-column align="center" prop="supplierName" label="承运方">
            </el-table-column>
            <el-table-column align="center" prop="lineName" label="路线">
              <template slot-scope="scope">
                <div>{{ scope.row.lineName || '--.--' }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="cargoWeight" label="运量">
            </el-table-column>
            <el-table-column align="center" prop="measureUnitStr" label="计量单位">
            </el-table-column>
            <el-table-column align="center" prop="ownerUnitPrice" label="货主金额">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" sortable>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" size="small" @click="routeToDetail(scope.row.waybillId)">详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--    <el-button type="text" size="small" @click="$router.push('/orderManagement/SettlementDoc/paymentOrderDetails/' + 4564)">测试详情</el-button>-->
    <el-dialog class="CollectionDialog" title="货主收款" :visible.sync="dialogVisible" width="400px">
      <el-form :model="CollectionForm" :rules="CollectionRules" ref="CollectionForm" label-width="100px" class="demoForm">
        <el-form-item label="应付金额" prop="payableAmount">
          <el-input v-model="CollectionForm.payableAmount" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="实付金额" prop="payAmount">
          <el-input v-model="CollectionForm.payAmount"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input type="textarea" resize="none" :rows="2" placeholder="请输入内容" v-model="CollectionForm.notes">
          </el-input>
        </el-form-item>

        <el-form-item label="上传附件" prop="signImage">
          <!-- action	必选参数，上传的地址 -->
          <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
          <!-- on-remove	文件列表移除文件时的钩子 -->
          <!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->
          <!-- limit	最大允许上传个数 -->
          <!-- on-exceed	文件超出个数限制时的钩子 -->
          <!-- file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
          <el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
            :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :on-success="onSuccess"
            :file-list="fileList" :headers="headers" v-model="CollectionForm.annex">
            <el-button size="small" class="uploadBtn" type="primary">选择文件</el-button>
            <span slot="tip" class="el-upload__tip">
              仅可上传一份合同文件，支持PDF、JPG等格式
            </span>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <div class="BtnBox">
            <el-button class="Btn" @click="dialogVisible = false">取消</el-button>
            <el-button class="Btn" type="primary" @click="submitForm('CollectionForm')">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue";
import httpApi from "@/http";
import BASEURL from "@/http/BaseUrl";
export default {
  data() {
    return {
      result: {},
      fileList: [], //上传文件
      activeName: "first",
      dialogVisible: false,
      oderState: "0", //假数据 核算状态
      records: [],
      CollectionForm: {
        notes: "",
        payableAmount: "",
        payAmount: "",
        annex: "",
      },
      CollectionRules: {
        payAmount: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        notes: [{ max: 30, message: "最大30个字符", trigger: "blur" }],
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BASEURL.TCHYURL + "/file/upload",
    };
  },
  created() {
    console.log();
  },
  methods: {
    goBack(pathVal,ativeName){
      this.$router.push({path:pathVal,query:{active:ativeName}})
    },
    routeToDetail(id) {
      console.log("运单ID=", id);
      this.$router.push("/orderManagement/WaybillManagement/Details/" + id);
    },
    async initDetails() {
      console.log(11111111111, this.$route.params);
      let res = await httpApi.SettlementDocApi.getReceiptDetail({
        id: this.$route.params.id,
      });
      if (res.data.code == 200) {
        this.result = res.data.data;
        this.CollectionForm.fleetSteelOrderId = res.data.data.fleetSteelOrderId;
        this.CollectionForm.payableAmount = res.data.data.contractorAmount;
      }
      console.log("详情数据", res.data.data);
    },
    goUrl(url) {
      window.open(url, "_blank");
    },

    isShowDialog() {
      this.dialogVisible = true;
    },
    submitForm(CollectionForm) {
      this.$refs[CollectionForm].validate((valid) => {
        if (valid) {
          let params = {
            payAmount: this.CollectionForm.payAmount,
            fleetSteelOrderId: this.CollectionForm.fleetSteelOrderId,
            remark: this.CollectionForm.notes,
            fileUrls: this.CollectionForm.annex,
          };
          httpApi.SettlementDocApi.calculateReceipt(params).then((res) => {
            if (res.data.code == 200) {
              this.$message("收款单结算成功");
              this.$router.go(0);
            } else {
              this.$message("收款单结算失败");
              return false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = [];
    },
    handlePreview(file) {
      console.log(file, 3333);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onSuccess(response, file, fileList) {
      console.log(response);
      this.CollectionForm.annex = response.data.url;
      this.fileList.push({
        name: response.data.name,
        url: this.response.data.url,
      });
    },
  },
  mounted() {
    this.initDetails();
  },
  components: {
    breadcrumb,
    titleVue,
  },
};
</script>

<style lang="scss" scoped>
.titleBox {
  flex: 1;
  background-color: #fff;
  height: 119px;
  display: flex;
  align-items: center;
  padding: 0 35px;
  margin-bottom: 9px;

  .feeGroup {

    display: flex;

    .feeBox {
      display: flex;
      width: 180px;
      align-items: center;

      .intervalLine {
        width: 2px;
        height: 64px;
        background-color: #f0f0f0;
        margin-right: 20px;
      }

      .feeItem {
        display: flex;
        flex-direction: column;
        margin-right: 20px;

        .tit {
          color: #a3a3a3;
          font-size: 12px;
          margin-bottom: 14px;
        }

        .price {
          color: #262626;
          font-size: 18px;
          font-weight: Bold;
        }
      }
    }
  }

  .icon-dingdan {
    font-size: 43px;
    margin-right: 10px;
  }

  .infoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .info_line1 {
      margin-bottom: 3px;
      display: flex;
      align-items: center;

      >.tit {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 8px;
        color: #262626;
      }

      >.tag {
        background-color: #ecf5fe;
        border-radius: 4px;
        width: 54px;
        height: 20px;
        color: #1890ff;
        font-size: 10px;
        text-align: center;
        line-height: 20px;
      }
    }

    .info_line2 {
      display: flex;
      color: #939393;
      font-size: 12px;
    }
  }

  .notAdopt_btn {
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    height: 36px;
    width: 80px;
    color: #262626;
    font-size: 12px;
    background-color: #fff;
    margin-right: 14px;
    cursor: pointer;
    transition: 0.2s;
    margin-left: auto;

    &:hover {
      opacity: 0.8;
      color: #1890ff;
      transition: 0.2s;
      border: 1px solid #1890ff;
    }
  }

  .examineBtn {
    background-color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    width: 80px;
    height: 36px;
    cursor: pointer;
  

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }
  }
}

.main {
  padding: 35px;
  background-color: #fff;
  min-height: calc(100vh - 255px);

  .main_item {
    margin-bottom: 40px;

    .list {
      border: 1px solid #f0f0f0;

      .tagBox {
        display: inline-block;

        .tag {
          // width: 63px;
          padding: 8px 10px;
          height: 28px;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          margin: 0 auto;

          .dian {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            margin-right: 4px;
          }


          &.yellow {
            background-color: #fffce8;
            color: #f9aa0d;

            .dian {
              background-color: #f9aa0d;
            }
          }

          &.dispatched {
            background-color: #ecf5fe;
            color: #1890ff;

            .dian {
              background-color: #1890ff;
            }
          }

          &.green {
            background-color: #ebfef5;
            color: #1acb7a;

            .dian {
              background-color: #1acb7a;
            }
          }


        }

      }

      .routeBox {
        display: flex;
      }
    }
  }
}

.CollectionDialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    padding: 0 20px 0px;
    height: 50px;
    line-height: 50px;
  }

  ::v-deep .el-form-item__label {
    color: #262626;
    font-size: 12px;
    line-height: 32px;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 34px 24px 29px;
  }

  .BtnBox {
    display: flex;
    justify-content: flex-end;

    .Btn {
      height: 36px;
      width: 80px;
      font-size: 12px;
    }
  }

  // 上传文件
  .upload {
    .uploadBtn {
      width: 80px;
      height: 32px;
      background-color: #1890ff;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      border-radius: 4px;
      transition: 0.2s;
      margin-right: 12px;
      margin-bottom: 8px;

      &:hover {
        opacity: 0.8;
      }
    }

    .el-upload__tip {
      color: #cccccc;
      font-size: 12px;
    }

    ::v-deep .el-upload-list {
      background-color: #eef3f9;
    }
  }
}
</style>
